import React, { useEffect } from 'react';
import { Button, Form, Input, Space, message } from 'antd';
import { useNavigate, useSearchParams } from "react-router-dom";
import Axios from 'axios';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const Addreserve = () => {
  const [searchParams] = useSearchParams();
  const id = searchParams.get("id");
  const [form] = Form.useForm();
  const navigate = useNavigate();

  useEffect(() => {
    if (id) {
      Axios.get("http://localhost:3000/reserve/getByid", { params: { id } })
        .then((res) => {
          form.setFieldsValue({
            name: res.data.data.name,
            rID: res.data.data.rID,
            date: res.data.data.date,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }, [id]);

  const onFinish = (values) => {
    Axios.get("http://localhost:3000/reserve/checkAvailability", {
      params: { rID: values.rID, date: values.date }
    }).then((res) => {
      if (!res.data.available) {
        message.error("该房间已被预订，无法重复预订");
      } else {
        if (id) {
          Axios.post("http://localhost:3000/reserve/update", { ...values, id }).then((res) => {
            if (res.data.code === 0) {
              message.success(res.data.message);
              navigate("/home/reserve", { replace: true });
            } else {
              message.info(res.data.message);
            }
          }).catch((err) => {
            message.error("服务器出错");
          });
        } else {
          Axios.post("http://localhost:3000/reserve/add", values).then((res) => {
            if (res.data.code === 0) {
              message.success(res.data.message);
              navigate("/home/reserve", { replace: true });
            } else {
              message.info(res.data.message);
            }
          }).catch((err) => {
            message.error("服务器出错");
          });
        }
      }
    }).catch((err) => {
      message.error("检查房间可用性时出错");
    });
  };

  const onReset = () => {
    form.resetFields();
  };

  return (
    <Form
      {...layout}
      form={form}
      name="control-hooks"
      onFinish={onFinish}
      style={{ maxWidth: 600 }}
    >
      <h2>{id ? "修改" : "添加"}预订</h2>
      <Form.Item
        name="name"
        label="客户名"
        rules={[{ required: true, message: '请输入客户名' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="rID"
        label="客房号"
        rules={[{ required: true, message: '请输入客房号!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="date"
        label="日期"
        rules={[{ required: true, message: '请输入日期!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Space>
          <Button type="primary" htmlType="submit">
            {id ? "保存" : "添加"}
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default Addreserve;
